//this information will be stored in "ItemListUI.js" file

/**
 * @class ItemListUI UI component to display items
 * @constructor
 * @param {Array} items array of com.ebay.shoppingservice.SimpleItemType
 * @param {Boolean} if show bid column
 */
function ItemListUI(items,isSearch,selling){

	this.items = items;
	this.isSearch = isSearch;
	this.newLine = "\n";
	this.selling=selling;
	
	//first column will contain the item's picture
	if(this.isSearch == 0){
		this.titles = ["","Item Title", "Price", "Time Left"];
		this.width = [4,7,5,5];
	}
	else{
		this.titles = ["","Item Title", "Price", "Time Left", "", ""];
		this.width = [4,7,5,5,3,3];	
	}
	
	//the html to display item information
	this.display = function() {
		if(this.isSearch == 0)
			var str = "<table style='padding: 2px 2px 2px 2px; background: #efefff;' width='100%' cellspacing='0' cellpadding='0'>" + this.newLine;
		else
			var str = "<table style='padding: 2px 2px 2px 2px 2px 2px; background: #efefff;' width='100%' cellspacing='0' cellpadding='0'>" + this.newLine;
		//constructing the first row of titles:
		if (this.titles) {
			str = str + "<tr style='background: #ccc; font-family: Calibri; font-size: small; font-weight:bold;'> " + this.newLine;
			if (com.ebay.widgets.typeOf(this.titles) == 'array') {
				for (var i=0; i< this.titles.length; ++i ) {
					str = str + "<td width='" +this.width[i] + "%' >" + this.titles[i] + "</td>" + this.newLine;
				}
			}
			else
				str = str + "<td>" + this.titles + "</td>" + this.newLine;
			str = str + "</tr>" + this.newLine;
		}
		//constructing the following rows: item information
		if (this.items) {
			if (com.ebay.widgets.typeOf(this.items) == 'array') {
				for (i = 0; i< this.items.length; ++i ) {
					//for every item, construct a new row//
					//change background color of item that the mouse is over//
					
					if(this.isSearch!=2 || this.selling[i]!='0')
						str = str + "<tr height='50' onmouseover='changeColor(this)' onmouseout='returnColor(this)'> " + this.newLine;
					else
						str = str + "<tr height='50' onmouseover='changeColor2(this)' onmouseout='returnColor(this)'> " + this.newLine;
					
					var item = this.items[i];

					//show the picture of the item
					if (this.items[i].galleryURL) {
							str = str + "<td><img style='margin: 0 6px 0 6px' height='40' width='40' src='" + this.items[i].galleryURL + "' " + "</td>" + this.newLine;
					}
					else {
						if (this.items[i].GalleryURL)
							str = str + "<td><img style='margin: 0 6px 0 6px' height='40' width='40' src='" + this.items[i].GalleryURL + "' " + "</td>" + this.newLine;
						else
							//add default picture, when no picture is available
							str = str + "<td><img style='margin: 0 6px 0 6px' height='50' width='50' src='" + image + "' " + "</td>" + this.newLine;
					}
					
					//show the item title, with a link to the page on EBay
					if(this.isSearch==1)
						str = str + "<td><a style='font-size: 70%' href='" + this.items[i].viewItemURLForNaturalSearch + "'>"
						+ this.items[i].title + "</a>" + "</td>" + this.newLine; // title
					else
						str = str + "<td><a style='font-size: 70%' href='" + this.items[i].ViewItemURLForNaturalSearch + "'>"
						+ this.items[i].Title + "</a>" + "</td>" + this.newLine; // title

					if(this.isSearch==1)
						//show the item current price (in USD)
						str = str + "<td style='font-weight:bold; font-size: 65%'>" + "$" + this.items[i].convertedCurrentPrice.value.toFixed(2) + "</td>" + this.newLine;
					else
						str = str + "<td style='font-weight:bold; font-size: 65%'>" + "$" + this.items[i].ConvertedCurrentPrice.Value.toFixed(2) + "</td>" + this.newLine;
					
					if(this.isSearch==1)
						//show the time left for the bid, until it closes
						str = str + "<td style='font-weight:bold; font-size:70%; color:red;'>" + this.items[i].timeLeft + "</td>" + this.newLine;
					else
						str = str + "<td style='font-weight:bold; font-size:70%; color:red;'>" + this.items[i].TimeLeft + "</td>" + this.newLine;
					
					if(this.isSearch != 0){
						if(this.isSearch==1){
							//show the buttons for buying and selling
							str = str + "<td>" + "<button onClick='addWatch("+i+", 1)'>buy</button>" + "</td>" + this.newLine;
							str = str + "<td>" + "<button onClick='addWatch("+i+", 0)'>sell</button>" + "</td>" + this.newLine;
						}
						else{
							//show the buttons for deleting and "bid"
							str = str + "<td>" + "<button onClick='changeToHighBid("+i+")'>bid</button>" + "</td>" + this.newLine;
							str = str + "<td>" + "<button onClick='deleteAuction("+i+", deleteAuctionResp)'>del</button>" + "</td>" +
								this.newLine;
						}
					}
					str = str + "</tr>" + this.newLine;
					str = str + "<tr><td colspan='" + this.titles.length + "' style='border-bottom: 2px solid #FFFFFF;'></td></tr>" + this.newLine;
				}
			}
		}
		str = str + "</table> " + this.newLine;
		return str;
	};
}

//change the color of a column when moused oved
function changeColor(e) {
	e.style.background = "#00ffff";
};

//return the color of the row, after mouse is not on the row
function returnColor(e) {
	e.style.background = "#efefff";
}

//change the color of a column when moused oved
function changeColor2(e) {
	e.style.background = "#FE00F0";
};
